<template>
  <view class="sign-up">
    <uni-nav-bar
      fixed
      :border="false"
      background-color="transparent"
      left-icon="left"
      height="120rpx"
      :title="$t(isSwitch ? 'form.top.phone.title' : 'form.email.title')"
      @clickLeft="onBack"></uni-nav-bar>
    <view class="top-logo">
      <image
        src="/static/logo-1.svg"
        mode="heightFix"
        style="height: 160rpx"></image>
    </view>
    <view class="public-form_index">
      <input
        v-model="formData.name"
        :type="isSwitch ? 'number' : ''"
        :placeholder="$t(isSwitch ? 'form.phone.comment' : 'form.email.comment')"
        class="public-form_input" />
      <view class="public-form_code public-form_top">
        <input
          v-model="formData.code"
          :placeholder="$t('form.code.title')"
          class="code" />
        <code-img
          :key="indexCode"
          v-model="formData.uuid"
          style="height: 66rpx" />
      </view>
      <view class="public-form_code public-form_top">
        <input
          v-model="formData.password"
          :type="pwdShow ? 'text' : 'password'"
          :adjust-position="false"
          :placeholder="$t('form.password')"
          class="password" />
        <uni-icons
          :type="pwdShow ? 'eye-filled' : 'eye-slash-filled'"
          size="24"
          color="#cccccc"
          @click="pwdShow = !pwdShow"></uni-icons>
      </view>

      <view class="public-form_code public-form_top">
        <input
          v-model="formData.password2"
          :type="pwdShow2 ? 'text' : 'password'"
          :adjust-position="false"
          :placeholder="$t('form.password2')"
          class="password" />
        <uni-icons
          :type="pwdShow2 ? 'eye-filled' : 'eye-slash-filled'"
          size="24"
          color="#cccccc"
          @click="pwdShow2 = !pwdShow2"></uni-icons>
      </view>

      <view class="public-bottom_text">
        <text @click="onBack">
          {{ $t('form.have.account') }}
        </text>
        <text @click="onSwitch">
          {{ $t(isSwitch ? 'form.email.title' : 'form.top.phone.title') }}
        </text>
      </view>
      <view class="public-bottom_btn">
        <button
          type="primary"
          @click="onRegister">
          {{ $t('form.register.title') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import http from '@/utils/request.js'
  import { ref, reactive } from 'vue'
  import { useI18n } from 'vue-i18n'
  import codeImg from './components/code-img.vue'
  import { useValidations } from '@/hooks/useValidations'

  const { t } = useI18n()
  const { validatePhone } = useValidations()
  const isSwitch = ref(true)
  const pwdShow = ref(false)
  const pwdShow2 = ref(false)
  const indexCode = ref(0)

  const formData = reactive({
    name: '',
    code: '',
    uuid: '',
    password: '',
    password2: ''
  })

  const onSwitch = () => {
    isSwitch.value = !isSwitch.value
    indexCode.value++
    formData.name = ''
    formData.code = ''
    formData.uuid = ''
    formData.password = ''
    formData.password2 = ''
  }

  const onBack = () => {
    uni.navigateBack()
  }

  const onRegister = async () => {
    const { name, code, uuid, password, password2 } = formData
    const show = isSwitch.value
    if (!name) {
      uni.showToast({
        title: t(show ? `form.phone.comment` : `form.email.comment`),
        icon: 'none'
      })
      return
    }

    if (show && validatePhone(name)) {
      return
    }

    if (!show) {
      const youxiao = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!youxiao.test(name)) {
        uni.showToast({
          title: t('form.email.error'),
          icon: 'none'
        })
        return
      }
    }

    if (!code) {
      uni.showToast({
        title: t('form.code.title'),
        icon: 'none'
      })
      return
    }

    if (!password) {
      uni.showToast({
        title: t('form.password'),
        icon: 'none'
      })

      return
    }

    const regex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,}$/
    if (!regex.test(password)) {
      uni.showToast({
        title: t('password.title'),
        icon: 'none'
      })
      return
    }

    if (!password2) {
      uni.showToast({
        title: t('form.password2'),
        icon: 'none'
      })
      return
    }

    if (password !== password2) {
      uni.showToast({
        title: t('form.password.error'),
        icon: 'none'
      })
      return
    }

    await http.post('/api/register', {
      code,
      uuid,
      type: show ? 2 : 1,
      email: show ? null : name,
      mobile: show ? name : null,
      password
    })

    uni.showToast({
      title: t('form.register.success'),
      icon: 'success',
      mask: true,
      success: () => {
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }, 1500)
      }
    })
  }
</script>

<style lang="scss" scoped>
  .sign-up {
    height: 100vh;
    background: url('/static/bg/login.png') no-repeat top center, #e2ecf8;
    background-size: 100%;

    .top-logo {
      height: 380rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;
    }
  }
</style>
